<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ECharts大屏图表组件</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    body {
      background: linear-gradient(135deg, #1a2a6c, #2c3e50);
      color: #ecf0f1;
      min-height: 100vh;
      padding: 20px;
    }

    .container {
      max-width: 1400px;
      margin: 0 auto;
      padding: 20px;
    }

    header {
      text-align: center;
      margin-bottom: 40px;
      padding: 30px;
      background: rgba(0, 0, 0, 0.3);
      border-radius: 15px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    }

    h1 {
      font-size: 2.8rem;
      margin-bottom: 15px;
      background: linear-gradient(90deg, #00c9ff, #92fe9d);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .subtitle {
      font-size: 1.2rem;
      opacity: 0.9;
      max-width: 800px;
      margin: 0 auto;
      line-height: 1.6;
    }

    .features {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px;
      margin-top: 30px;
    }

    .feature {
      background: rgba(52, 152, 219, 0.2);
      padding: 15px 25px;
      border-radius: 50px;
      font-size: 0.95rem;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .content-wrapper {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 30px;
      margin-bottom: 40px;
    }

    @media (max-width: 1200px) {
      .content-wrapper {
        grid-template-columns: 1fr;
      }
    }

    .demo-section {
      background: rgba(0, 0, 0, 0.25);
      border-radius: 15px;
      padding: 25px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
      display: flex;
      flex-direction: column;
    }

    .docs-section {
      background: rgba(0, 0, 0, 0.25);
      border-radius: 15px;
      padding: 25px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    }

    .section-title {
      font-size: 1.8rem;
      margin-bottom: 25px;
      padding-bottom: 15px;
      border-bottom: 2px solid #3498db;
      color: #3498db;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .chart-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
      gap: 25px;
      margin-top: 20px;
    }

    .chart-card {
      background: rgba(0, 0, 0, 0.3);
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
      transition: transform 0.3s;
    }

    .chart-card:hover {
      transform: translateY(-5px);
    }

    .chart-header {
      padding: 15px 20px;
      background: rgba(52, 152, 219, 0.3);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .chart-title {
      font-weight: 600;
      font-size: 1.2rem;
    }

    .chart-tools {
      display: flex;
      gap: 10px;
    }

    .chart-tool-btn {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 0.3s;
    }

    .chart-tool-btn:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    .chart-wrapper {
      height: 350px;
      position: relative;
    }

    .chart-placeholder {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      flex-direction: column;
      gap: 15px;
      color: #7f8c8d;
    }

    .chart-placeholder i {
      font-size: 3rem;
      opacity: 0.5;
    }

    .control-panel {
      background: rgba(0, 0, 0, 0.2);
      padding: 20px;
      border-radius: 12px;
      margin-top: 25px;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;
    }

    .control-group {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    label {
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    select,
    input,
    button {
      padding: 12px 15px;
      border: none;
      border-radius: 8px;
      background: #34495e;
      color: white;
      font-size: 1rem;
      outline: none;
    }

    button {
      background: #3498db;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    button:hover {
      background: #2980b9;
      transform: translateY(-2px);
    }

    .btn-group {
      display: flex;
      gap: 15px;
      margin-top: 15px;
    }

    .theme-btn {
      flex: 1;
    }

    .theme-btn.light {
      background: #f39c12;
    }

    .theme-btn.light:hover {
      background: #e67e22;
    }

    .theme-btn.dark {
      background: #2c3e50;
    }

    .theme-btn.dark:hover {
      background: #1a2530;
    }

    .docs-content {
      background: rgba(0, 0, 0, 0.2);
      border-radius: 12px;
      padding: 25px;
      max-height: 600px;
      overflow-y: auto;
    }

    .docs-section h3 {
      margin: 25px 0 15px;
      color: #3498db;
      font-size: 1.4rem;
    }

    .prop-table {
      width: 100%;
      border-collapse: collapse;
      margin: 20px 0;
    }

    .prop-table th {
      background: rgba(52, 152, 219, 0.3);
      padding: 12px 15px;
      text-align: left;
      font-weight: 600;
    }

    .prop-table td {
      padding: 12px 15px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .prop-table tr:last-child td {
      border-bottom: none;
    }

    .code-block {
      background: rgba(0, 0, 0, 0.3);
      padding: 20px;
      border-radius: 8px;
      font-family: monospace;
      margin: 20px 0;
      overflow-x: auto;
      line-height: 1.6;
      font-size: 0.95rem;
    }

    .highlight {
      color: #f1c40f;
    }

    .method-list {
      display: flex;
      flex-direction: column;
      gap: 15px;
    }

    .method-item {
      background: rgba(0, 0, 0, 0.15);
      padding: 15px;
      border-radius: 8px;
    }

    .method-name {
      font-weight: 600;
      color: #3498db;
      margin-bottom: 8px;
    }

    .method-desc {
      opacity: 0.9;
    }

    footer {
      text-align: center;
      padding: 30px;
      margin-top: 40px;
      background: rgba(0, 0, 0, 0.3);
      border-radius: 15px;
      font-size: 1rem;
      opacity: 0.8;
    }

    /* 滚动条样式 */
    .docs-content::-webkit-scrollbar {
      width: 8px;
    }

    .docs-content::-webkit-scrollbar-track {
      background: rgba(0, 0, 0, 0.1);
      border-radius: 4px;
    }

    .docs-content::-webkit-scrollbar-thumb {
      background: #3498db;
      border-radius: 4px;
    }

    @media (max-width: 768px) {
      .chart-container {
        grid-template-columns: 1fr;
      }

      h1 {
        font-size: 2.2rem;
      }

      .section-title {
        font-size: 1.5rem;
      }
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="container">
      <header>
        <h1><i class="fas fa-chart-line"></i> ECharts大屏图表组件</h1>
        <p class="subtitle">基于Vue3和ECharts5封装的高性能、可配置的大屏数据可视化组件，支持多种图表类型和主题切换，适用于各种数据监控场景</p>

        <div class="features">
          <div class="feature"><i class="fas fa-sync-alt"></i> 响应式设计</div>
          <div class="feature"><i class="fas fa-palette"></i> 主题切换</div>
          <div class="feature"><i class="fas fa-bolt"></i> 动态数据更新</div>
          <div class="feature"><i class="fas fa-tools"></i> 自定义工具栏</div>
          <div class="feature"><i class="fas fa-expand-arrows-alt"></i> 自动适配容器</div>
          <div class="feature"><i class="fas fa-code"></i> 详细使用文档</div>
        </div>
      </header>

      <div class="content-wrapper">
        <div class="demo-section">
          <h2 class="section-title"><i class="fas fa-laptop-code"></i> 组件演示</h2>

          <div class="chart-container">
            <div class="chart-card">
              <div class="chart-header">
                <div class="chart-title">销售趋势分析</div>
                <div class="chart-tools">
                  <div class="chart-tool-btn"><i class="fas fa-expand"></i></div>
                  <div class="chart-tool-btn"><i class="fas fa-download"></i></div>
                </div>
              </div>
              <div class="chart-wrapper">
                <echarts-chart ref="lineChart" chart-type="line" :options="lineOptions" :theme="currentTheme"
                  :loading="loading" height="100%" @chart-ready="onChartReady"></echarts-chart>
              </div>
            </div>

            <div class="chart-card">
              <div class="chart-header">
                <div class="chart-title">产品销量分布</div>
                <div class="chart-tools">
                  <div class="chart-tool-btn"><i class="fas fa-expand"></i></div>
                  <div class="chart-tool-btn"><i class="fas fa-download"></i></div>
                </div>
              </div>
              <div class="chart-wrapper">
                <echarts-chart ref="pieChart" chart-type="pie" :options="pieOptions" :theme="currentTheme"
                  height="100%"></echarts-chart>
              </div>
            </div>

            <div class="chart-card">
              <div class="chart-header">
                <div class="chart-title">区域销售对比</div>
                <div class="chart-tools">
                  <div class="chart-tool-btn"><i class="fas fa-expand"></i></div>
                  <div class="chart-tool-btn"><i class="fas fa-download"></i></div>
                </div>
              </div>
              <div class="chart-wrapper">
                <echarts-chart ref="barChart" chart-type="bar" :options="barOptions" :theme="currentTheme"
                  height="100%"></echarts-chart>
              </div>
            </div>

            <div class="chart-card">
              <div class="chart-header">
                <div class="chart-title">用户访问来源</div>
                <div class="chart-tools">
                  <div class="chart-tool-btn"><i class="fas fa-expand"></i></div>
                  <div class="chart-tool-btn"><i class="fas fa-download"></i></div>
                </div>
              </div>
              <div class="chart-wrapper">
                <echarts-chart ref="radarChart" chart-type="radar" :options="radarOptions" :theme="currentTheme"
                  height="100%"></echarts-chart>
              </div>
            </div>
          </div>

          <div class="control-panel">
            <div class="control-group">
              <label for="theme"><i class="fas fa-palette"></i> 主题选择</label>
              <select id="theme" v-model="currentTheme">
                <option value="light">亮色主题</option>
                <option value="dark">暗色主题</option>
                <option value="vintage">复古主题</option>
                <option value="macarons">马卡龙主题</option>
              </select>
            </div>

            <div class="control-group">
              <label for="chartType"><i class="fas fa-chart-bar"></i> 图表类型</label>
              <select id="chartType" v-model="currentChartType">
                <option value="line">折线图</option>
                <option value="bar">柱状图</option>
                <option value="pie">饼图</option>
                <option value="radar">雷达图</option>
              </select>
            </div>

            <div class="control-group">
              <label><i class="fas fa-database"></i> 数据量: {{ dataSize }}</label>
              <input type="range" v-model.number="dataSize" min="5" max="20">
            </div>

            <div class="control-group">
              <label><i class="fas fa-tachometer-alt"></i> 动画速度: {{ animationSpeed }}</label>
              <input type="range" v-model.number="animationSpeed" min="0" max="2000" step="100">
            </div>
          </div>

          <div class="btn-group">
            <button class="theme-btn light" @click="toggleTheme('light')">
              <i class="fas fa-sun"></i> 亮色主题
            </button>
            <button class="theme-btn dark" @click="toggleTheme('dark')">
              <i class="fas fa-moon"></i> 暗色主题
            </button>
            <button @click="toggleLoading">
              <i :class="loading ? 'fas fa-spinner fa-spin' : 'fas fa-spinner'"></i>
              {{ loading ? '隐藏加载' : '显示加载' }}
            </button>
            <button @click="updateChartData">
              <i class="fas fa-sync-alt"></i> 更新数据
            </button>
          </div>
        </div>

        <div class="docs-section">
          <h2 class="section-title"><i class="fas fa-book"></i> 组件文档</h2>

          <div class="docs-content">
            <h3>组件介绍</h3>
            <p>EchartsChart 是一个基于 Vue3 和 ECharts5 封装的高性能图表组件，具有以下特点：</p>
            <ul>
              <li>支持多种图表类型（折线图、柱状图、饼图、雷达图等）</li>
              <li>自动响应容器尺寸变化</li>
              <li>内置多种主题切换</li>
              <li>支持动态数据更新</li>
              <li>提供加载状态显示</li>
              <li>内置常用图表配置模板</li>
              <li>提供图表实例访问方法</li>
            </ul>

            <h3>核心功能实现</h3>
            <ul>
              <li>使用Echarts的init方法初始化图表</li>
              <li>通过watch监听配置变化并更新图表</li>
              <li>使用resize方法实现响应式布局</li>
              <li>提供加载状态显示/隐藏方法</li>
            </ul>

            <h3>基本用法</h3>
            <div class="code-block">
              &lt;template&gt;<br>
              &nbsp;&nbsp;&lt;echarts-chart<br>
              &nbsp;&nbsp;&nbsp;&nbsp;chart-type="line"<br>
              &nbsp;&nbsp;&nbsp;&nbsp;:options="chartOptions"<br>
              &nbsp;&nbsp;&nbsp;&nbsp;:theme="currentTheme"<br>
              &nbsp;&nbsp;&nbsp;&nbsp;height="400px"<br>
              &nbsp;&nbsp;&nbsp;&nbsp;@chart-ready="handleChartReady"<br>
              &nbsp;&nbsp;/&gt;<br>
              &lt;/template&gt;<br><br>

              &lt;script&gt;<br>
              &nbsp;&nbsp;export default {<br>
              &nbsp;&nbsp;&nbsp;&nbsp;data() {<br>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return {<br>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;currentTheme: 'dark',<br>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;chartOptions: {<br>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;title: { text: '销售趋势分析' },<br>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// 其他配置项...<br>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};<br>
              &nbsp;&nbsp;&nbsp;&nbsp;},<br>
              &nbsp;&nbsp;&nbsp;&nbsp;methods: {<br>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handleChartReady(chartInstance) {<br>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// 图表初始化完成<br>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>
              &nbsp;&nbsp;&nbsp;&nbsp;}<br>
              &nbsp;&nbsp;};<br>
              &lt;/script&gt;
            </div>

            <h3>Props 配置</h3>
            <table class="prop-table">
              <thead>
                <tr>
                  <th>参数</th>
                  <th>说明</th>
                  <th>类型</th>
                  <th>默认值</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>chartType</td>
                  <td>图表类型（line, bar, pie, radar等）</td>
                  <td>String</td>
                  <td>'line'</td>
                </tr>
                <tr>
                  <td>options</td>
                  <td>ECharts配置对象</td>
                  <td>Object</td>
                  <td>{}</td>
                </tr>
                <tr>
                  <td>theme</td>
                  <td>主题名称（内置：light, dark, vintage, macarons）</td>
                  <td>String</td>
                  <td>'dark'</td>
                </tr>
                <tr>
                  <td>loading</td>
                  <td>是否显示加载状态</td>
                  <td>Boolean</td>
                  <td>false</td>
                </tr>
                <tr>
                  <td>height</td>
                  <td>图表高度（支持CSS单位）</td>
                  <td>String</td>
                  <td>'400px'</td>
                </tr>
                <tr>
                  <td>initOptions</td>
                  <td>ECharts初始化配置</td>
                  <td>Object</td>
                  <td>{ renderer: 'canvas' }</td>
                </tr>
                <tr>
                  <td>autoResize</td>
                  <td>是否自动响应容器尺寸变化</td>
                  <td>Boolean</td>
                  <td>true</td>
                </tr>
              </tbody>
            </table>

            <h3>事件</h3>
            <table class="prop-table">
              <thead>
                <tr>
                  <th>事件名</th>
                  <th>说明</th>
                  <th>回调参数</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>chart-ready</td>
                  <td>图表初始化完成时触发</td>
                  <td>chartInstance (ECharts实例)</td>
                </tr>
                <tr>
                  <td>chart-updated</td>
                  <td>图表更新完成时触发</td>
                  <td>chartInstance (ECharts实例)</td>
                </tr>
                <tr>
                  <td>chart-click</td>
                  <td>图表点击事件</td>
                  <td>ECharts事件对象</td>
                </tr>
              </tbody>
            </table>

            <h3>组件方法</h3>
            <div class="method-list">
              <div class="method-item">
                <div class="method-name">getChartInstance()</div>
                <div class="method-desc">获取ECharts实例，用于调用ECharts原生方法</div>
              </div>
              <div class="method-item">
                <div class="method-name">resize()</div>
                <div class="method-desc">手动调整图表尺寸，通常在容器尺寸变化时调用</div>
              </div>
              <div class="method-item">
                <div class="method-name">showLoading()</div>
                <div class="method-desc">显示加载状态</div>
              </div>
              <div class="method-item">
                <div class="method-name">hideLoading()</div>
                <div class="method-desc">隐藏加载状态</div>
              </div>
              <div class="method-item">
                <div class="method-name">dispose()</div>
                <div class="method-desc">销毁图表实例</div>
              </div>
            </div>

            <h3>主题定制</h3>
            <p>组件支持通过主题名称切换内置主题，也支持自定义主题：</p>
            <div class="code-block">
              // 注册自定义主题<br>
              import echarts from 'echarts';<br>
              <br>
              const myTheme = {<br>
              &nbsp;&nbsp;color: ['#c23531','#2f4554','#61a0a8','#d48265','#91c7ae'],<br>
              &nbsp;&nbsp;backgroundColor: '#f5f5f5',<br>
              &nbsp;&nbsp;// 其他主题配置...<br>
              };<br>
              <br>
              echarts.registerTheme('myTheme', myTheme);<br>
              <br>
              // 在组件中使用<br>
              &lt;echarts-chart theme="myTheme" ... /&gt;
            </div>
          </div>
        </div>
      </div>

      <footer>
        <p>© 2023 大屏数据可视化组件库 | ECharts图表组件 v2.0</p>
      </footer>
    </div>
  </div>

  <script>
    const { createApp, ref, computed, onMounted, onBeforeUnmount, watch } = Vue;

    // 定义ECharts图表组件
    const EchartsChart = {
      props: {
        chartType: {
          type: String,
          default: 'line'
        },
        options: {
          type: Object,
          default: () => ({})
        },
        theme: {
          type: String,
          default: 'dark'
        },
        loading: {
          type: Boolean,
          default: false
        },
        height: {
          type: String,
          default: '400px'
        },
        initOptions: {
          type: Object,
          default: () => ({ renderer: 'canvas' })
        },
        autoResize: {
          type: Boolean,
          default: true
        }
      },
      emits: ['chart-ready', 'chart-updated', 'chart-click'],
      setup(props, { emit }) {
        const chartRef = ref(null);
        const chartInstance = ref(null);
        const chartDom = ref(null);

        // 初始化图表
        const initChart = () => {
          if (!chartDom.value) return;

          // 销毁现有实例
          if (chartInstance.value) {
            echarts.dispose(chartInstance.value);
          }

          // 创建新实例
          chartInstance.value = echarts.init(
            chartDom.value,
            props.theme,
            props.initOptions
          );

          // 设置初始配置
          setChartOptions(props.options);

          // 绑定事件
          chartInstance.value.on('click', (params) => {
            emit('chart-click', params);
          });

          // 触发chart-ready事件
          emit('chart-ready', chartInstance.value);
        };

        // 设置图表配置
        const setChartOptions = (options) => {
          if (!chartInstance.value) return;

          // 合并基础配置
          const baseOptions = getBaseOptions(props.chartType);
          const mergedOptions = { ...baseOptions, ...options };

          chartInstance.value.setOption(mergedOptions, true);
          emit('chart-updated', chartInstance.value);
        };

        // 获取基础配置模板
        const getBaseOptions = (type) => {
          const base = {
            animation: true,
            animationDuration: 1000,
            animationEasing: 'cubicOut',
            tooltip: {
              trigger: 'axis',
              backgroundColor: 'rgba(0,0,0,0.7)',
              borderColor: 'rgba(0,0,0,0.7)',
              textStyle: { color: '#fff' }
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            }
          };

          switch (type) {
            case 'line':
              return {
                ...base,
                xAxis: { type: 'category' },
                yAxis: { type: 'value' },
                series: [{ type: 'line' }]
              };
            case 'bar':
              return {
                ...base,
                xAxis: { type: 'category' },
                yAxis: { type: 'value' },
                series: [{ type: 'bar' }]
              };
            case 'pie':
              return {
                ...base,
                tooltip: { trigger: 'item' },
                legend: { orient: 'horizontal', bottom: 0 },
                series: [{
                  type: 'pie',
                  radius: ['40%', '70%'],
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }]
              };
            case 'radar':
              return {
                ...base,
                radar: {
                  indicator: []
                },
                series: [{ type: 'radar' }]
              };
            default:
              return base;
          }
        };

        // 调整尺寸
        const resize = () => {
          if (chartInstance.value) {
            chartInstance.value.resize();
          }
        };

        // 显示加载状态
        const showLoading = () => {
          if (chartInstance.value) {
            chartInstance.value.showLoading('default', {
              text: '加载中...',
              color: '#3498db',
              textColor: '#ecf0f1',
              maskColor: 'rgba(0, 0, 0, 0.3)'
            });
          }
        };

        // 隐藏加载状态
        const hideLoading = () => {
          if (chartInstance.value) {
            chartInstance.value.hideLoading();
          }
        };

        // 销毁实例
        const dispose = () => {
          if (chartInstance.value) {
            echarts.dispose(chartInstance.value);
            chartInstance.value = null;
          }
        };

        // 获取图表实例
        const getChartInstance = () => {
          return chartInstance.value;
        };

        // 监听props变化
        watch(() => props.options, (newOptions) => {
          setChartOptions(newOptions);
        }, { deep: true });

        watch(() => props.theme, (newTheme) => {
          dispose();
          initChart();
        });

        watch(() => props.loading, (isLoading) => {
          if (isLoading) {
            showLoading();
          } else {
            hideLoading();
          }
        });

        watch(() => props.chartType, (newType) => {
          setChartOptions(props.options);
        });

        // 监听窗口大小变化
        const handleResize = () => {
          if (props.autoResize) {
            resize();
          }
        };

        // 生命周期
        onMounted(() => {
          initChart();
          window.addEventListener('resize', handleResize);
        });

        onBeforeUnmount(() => {
          dispose();
          window.removeEventListener('resize', handleResize);
        });

        return {
          chartRef,
          chartDom,
          resize,
          showLoading,
          hideLoading,
          dispose,
          getChartInstance
        };
      },
      template: `
        <div ref="chartRef" :style="{ height: height }">
          <div ref="chartDom" style="width: 100%; height: 100%;"></div>
        </div>
      `
    };

    // 创建应用实例
    const app = createApp({
      components: {
        EchartsChart
      },
      setup() {
        // 当前主题
        const currentTheme = ref('dark');
        // 图表类型
        const currentChartType = ref('line');
        // 加载状态
        const loading = ref(false);
        // 数据量
        const dataSize = ref(10);
        // 动画速度
        const animationSpeed = ref(1000);

        // 生成模拟数据
        const generateData = (size) => {
          const categories = [];
          const values = [];

          for (let i = 0; i < size; i++) {
            categories.push(`产品${i + 1}`);
            values.push(Math.floor(Math.random() * 1000) + 500);
          }

          return { categories, values };
        };

        // 折线图配置
        const lineOptions = computed(() => {
          const { categories, values } = generateData(dataSize.value);
          return {
            title: { text: '月度销售趋势', left: 'center' },
            tooltip: { trigger: 'axis' },
            xAxis: {
              type: 'category',
              data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'].slice(0, dataSize.value)
            },
            yAxis: { type: 'value' },
            series: [
              {
                name: '销售额',
                type: 'line',
                smooth: true,
                data: Array(dataSize.value).fill(0).map(() => Math.floor(Math.random() * 10000) + 5000),
                animationDuration: animationSpeed.value
              }
            ]
          };
        });

        // 饼图配置
        const pieOptions = computed(() => {
          const { categories, values } = generateData(dataSize.value);
          return {
            title: { text: '产品销量占比', left: 'center' },
            tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
            legend: {
              orient: 'horizontal',
              bottom: 10,
              data: categories
            },
            series: [
              {
                name: '销量',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                  borderRadius: 10,
                  borderColor: '#fff',
                  borderWidth: 2
                },
                label: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  label: { show: true, fontSize: '18', fontWeight: 'bold' }
                },
                labelLine: { show: false },
                data: categories.map((name, index) => ({
                  name,
                  value: values[index]
                })),
                animationDuration: animationSpeed.value
              }
            ]
          };
        });

        // 柱状图配置
        const barOptions = computed(() => {
          const { categories, values } = generateData(dataSize.value);
          return {
            title: { text: '区域销售对比', left: 'center' },
            tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
            xAxis: {
              type: 'category',
              data: ['华东', '华南', '华北', '西南', '西北', '东北', '华中'].slice(0, dataSize.value)
            },
            yAxis: { type: 'value' },
            series: [
              {
                name: '销售额',
                type: 'bar',
                barWidth: '60%',
                data: Array(dataSize.value).fill(0).map(() => Math.floor(Math.random() * 10000) + 5000),
                animationDuration: animationSpeed.value
              }
            ]
          };
        });

        // 雷达图配置
        const radarOptions = computed(() => {
          const indicators = [
            { name: '销售', max: 100 },
            { name: '管理', max: 100 },
            { name: '技术', max: 100 },
            { name: '客服', max: 100 },
            { name: '研发', max: 100 },
            { name: '市场', max: 100 }
          ].slice(0, dataSize.value);

          return {
            title: { text: '能力评估雷达图', left: 'center' },
            tooltip: {},
            radar: {
              indicator: indicators
            },
            series: [
              {
                name: '团队能力',
                type: 'radar',
                data: [
                  {
                    value: indicators.map(() => Math.floor(Math.random() * 80) + 20),
                    name: '团队A',
                    areaStyle: {}
                  }
                ],
                animationDuration: animationSpeed.value
              }
            ]
          };
        });

        // 切换主题
        const toggleTheme = (theme) => {
          currentTheme.value = theme;
        };

        // 切换加载状态
        const toggleLoading = () => {
          loading.value = !loading.value;
        };

        // 更新图表数据
        const updateChartData = () => {
          // 数据在computed中会自动更新
        };

        // 图表就绪回调
        const onChartReady = (chartInstance) => {
          console.log('折线图已就绪:', chartInstance);
        };

        return {
          currentTheme,
          currentChartType,
          loading,
          dataSize,
          animationSpeed,
          lineOptions,
          pieOptions,
          barOptions,
          radarOptions,
          toggleTheme,
          toggleLoading,
          updateChartData,
          onChartReady
        };
      }
    });

    app.component('EchartsChart', EchartsChart);
    app.mount('#app');
  </script>
</body>

</html>